<template>
  <main class="px-[3.733333vw] flex flex-col gap-[14px] pb-[60px]">
    <template v-if="loading">
      <var-skeleton
        title
        :rows="4"
        :loading="loading"
        :rows-width="['200px', '100px', '50px', '200px']"
        class="enter-y bg-white"
        v-for="i in 4"
        :key="i"
      />
    </template>
    <template v-else>
      <template v-if="examList.length !== 0">
        <template v-for="i in examList" :key="i.key">
          <var-card
            :title="i.test_name"
            :subtitle="`所属专业:${i.subject_name};
            限制时间:${i.time_limit}分钟;
            `"
            :description="i.exam_introduction"
            class="enter-y"
          >
            <template #extra>
              <div>
                <var-button type="primary" @click="toExam(i.key)">进入考试</var-button>
                <span class="ml-[9px] text-gray-500 text-[12px]">
                  {{ `结束时间：${dayjs(i.exam_deadline).format('YYYY-MM-DD HH:mm')}` }}
                </span>
              </div>
            </template>
          </var-card>
        </template>
      </template>

      <template v-else>
        <div class="text-[16px] text-center text-gray-500 py-2 enter-y"> 还没有考试哦 </div>
      </template>
    </template>
  </main>
</template>

<script setup lang="ts">
  import { getExamList } from '@/api/user';
  import router from '@/router';
  import { useUserInfoStoreWithOut } from '@/stores/modules/userInfo';
  import { StudentExam } from '@/utils/interface';
  import dayjs from 'dayjs';

  let loading = ref(true);
  let examList = ref<StudentExam[]>([]);
  const getCurrentStudentExam = async () => {
    const { getUserId } = storeToRefs(useUserInfoStoreWithOut());
    try {
      const { data } = await getExamList(getUserId.value);
      examList.value = data;
      console.log(examList.value);
    } catch {
      router.replace('/home');
    }
    loading.value = false;
  };
  getCurrentStudentExam();
  const toExam = (id: number) => {
    router.push({
      name: 'startExam',
      params: {
        id,
      },
    });
  };
</script>
